// 加载组件

import React from 'react';
// 引入Ui组件库，先下载  npm i antd --save
import {Spin} from 'antd'
// 使用css-in-js，需要下载 npm i styled-components
import styled from 'styled-components'
// 使用数据类型校验
import Pts from 'prop-types'

// 设置props是为了以防万一，有父组件需要传过来的数据，
// 有需要传的数据就用prop-types校验，没有需要传的数据就使用默认数据
const Loading = (props) => {
    return (
        <Main>
            <Spin size='large' spinning={props.spinning} tip={props.tip}></Spin>
        </Main>
    );
}


// 使用css-in-js
const Main = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
`

// 二次封装ui组件库提供的组件，需要考虑：
// 给该组件设置一些默认的属性，用来接收必要时父组件传给子组件的属性，来修改默认属性
// 默认数据，在没有数据传输时使用
Loading.defaultProps={
    spinning:true,
    tip:'加载中'
}
// 有数据传输时，需要进行参数类型的校验
Loading.propTypes={
    spinning:Pts.bool,
    tip:Pts.string
}

export default Loading;
